<template>
  <div>
    <div style="height: 420px;padding: 15px;border-radius: 8px;box-shadow: 1px 2px 12px 0 rgba(0, 0, 0, 0.1);margin-bottom: 10px">
      <div style="display: flex;justify-content: space-between;">
        <div style="display: flex">
          <img
            :src="device.iconUrl"
            style="width: 30px;height: 30px"
          >
          <div class="text-gray-500 ml-2">
            <div class="text-xs mb-1">
              <span>{{ device.deviceName }}</span>
            </div>
            <div class="text-xs ">
              <span>{{ device.deviceCore }}</span>
              <span>[ {{ formatDeviceStatus() }} ]</span>
            </div>
          </div>
        </div>
        <el-button-group>
          <el-button round icon="el-icon-menu" @click.stop="deviceMore()" />
          <el-button icon="el-icon-setting" @click.stop="deviceSetting()" />
          <el-button icon="el-icon-s-platform" @click.stop="deviceSensor()" />
        </el-button-group>
      </div>
      <div style="height: 360px" class="uni-scroll">
        <grid-device-sensor :device="device" :show-param-list="showParamList" :show-explain-list="showExplainList" />
      </div>
    </div>

    <el-dialog
      :visible.sync="showSetting"
      :title="device.deviceName"
      destroy-on-close
      width="1200px"
      top="15px"
    >
      <device-setting
        :device-core="device.deviceCore"
        class="uni-scroll"
        style="height: 600px"
      />
    </el-dialog>

    <el-drawer
      size="70%"
      :visible.sync="drawer"
      direction="rtl"
    >
      <div class="uni-scroll" style="height: calc(100vh - 100px)">
        <sensor-camera-list :device="device" />
      </div>
    </el-drawer>

  </div>
</template>

<script>
import {
  formatDeviceStatus
} from '@/util/common'
import GridDeviceSensor from '@/components/GridDeviceSensor'
import DeviceSetting from '@/components/DeviceSetting'
import SensorCameraList from '@/components/SensorCameraList'
export default {
  name: 'GridDevice',
  components: {
    DeviceSetting,
    SensorCameraList,
    GridDeviceSensor
  },
  props: {
    device: {
      type: Object,
      default: null
    },
    showParamList: {
      type: String,
      default: '1'
    },
    showExplainList: {
      type: String,
      default: '1'
    }
  },
  data() {
    return {
      showSetting: false,
      drawer: false
    }
  },
  methods: {
    formatDeviceStatus() {
      return formatDeviceStatus(this, this.device.status)
    },
    deviceMore() {
      this.$router.push({
        path: '/device/manage/' + this.device.deviceCore,
        query: {
          deviceCore: this.device.deviceCore,
          deviceName: this.device.deviceName
        }
      })
    },
    deviceSetting() {
      this.showSetting = true
    },
    deviceSensor() {
      this.drawer = true
    },
    getSensor() {
      this.drawer = true
    }
  }
}
</script>
<style scoped lang="scss">

  //@import '@/styles/element-variables.scss';
  //
  //.primary-color {
  //  background: $--color-primary;
  //}

  //.config-item {
  //  margin-top: 2px;
  //  padding: 3px;
  //  /*box-shadow: 0 2px 12px 0 rgba(0,0,0,.2);*/
  //  border-radius: 5px;
  //  height: 35px;
  //  width: 100%;
  //  display: flex;
  //  justify-content: space-between
  //}
  //
  //.config-item:hover {
  //  background: #E4E7ED;
  //}

  //.item {
  //
  //}

</style>
